<template>
    <div class="form_login">
        <el-form ref="loginFormObj" :model="loginmodel" label-width=auto  max>
            <el-form-item prop="userName" label="UserName:">
                <el-input v-model="loginmodel.userName">
                    <template #prefix>
                     
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password" label="Password:">
                <el-input type="password" v-model="loginmodel.password" show-password>
                    <template #prefix>
                      
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button :loading="isLoading" type="primary" style="width: 100%;" @click.prevent="LoginHandler" >
                    <span v-if="!isLoading" >Login</span>
                    <span v-else>waiting... </span>
                </el-button>
            </el-form-item>
            <el-form-item >
                <router-link class="link-type"  :to="'/register'">立即注册</router-link>
            </el-form-item>
            <el-form-item >
                <router-link class="link-type" :to="'/index'">back</router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>

import request from '@/util/request.js'
import useUserStore from '@/store/app/user'

const loginFormObj = ref();
const loginmodel = reactive({ userName: '', password: '' })
const isLoading =ref(false);
const UserStore = useUserStore();
const router = useRouter();

function LoginHandler() {
    
    isLoading.value=true;
    console.log(JSON.stringify(loginmodel));
   
    UserStore.login(loginmodel.userName,loginmodel.password)
    .then(()=>{
         console.log(1);
         console.log(getToken());
         router.push('/index');
    })

    isLoading.value=false;
 
}
</script>

<style scoped>
.form_login{
    max-width: 100vh;
}
</style>